
// 1, 获取浏览器地址栏数据参数
const urlObj = myGetUrlVal();
console.log(urlObj);

// 定义变量 获取标签对象

// 默认第一次显示第一页数据
let page = 1;
// 默认设定每页显示4条数据
let line = 8;

let sunLine;


const oBox = document.querySelector('.container');

// 2, 调用函数 发送请求 根据数据库数据 动态渲染生成页面
setPage();



async function setPage() {
    // 发送 ajax请求
    const response = await myPromiseJQueryAjax('../server/goods_list.php', 'get', { cat_one_id: urlObj.cat_one_id, page: page, line: line }, 'json');
    console.log(response);

    // 根据 数据结果 动态渲染 生成页面

    // 先 清空原始内容
    $('.container').html('');

    // 创建ul标签节点
    const oUl = document.createElement('ul');

    // 根据 数组 response.data 生成 4个li
    let liStr = '';
    response.data.forEach(item => {
        liStr += `
      <li class="list-item">
        <div class="panel panel-primary">
          <div class="panel-body">
            <ol class="breadcrumb">
              <li><a href="#">${item.cat_one_id}</a></li>
              <li><a href="#">${item.cat_two_id}</a></li>
              <li class="active">${item.cat_three_id}</li>
            </ol>
          </div>
          <div class="panel-footer">
            <div class="row">
              <div class="">
                <div class="thumbnail">
                  <img src="${item.goods_big_logo}" alt="...">
                  <div class="caption">
                    <h3>${item.goods_name}</h3>
                    <p>
                      <i class="glyphicon glyphicon-yen"></i>
                      <span>${item.goods_price}</span>
                    </p>
                    <p>
                      <a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a>
                      <a href="./detail.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
    
    
    `;
    })

    // 写入ul标签节点中
    oUl.innerHTML = liStr;

    // 将 ul标签节点 写入 
    oBox.appendChild(oUl);

    // 将分页器插件的程序 定义在 async 函数中 在 await 调用的异步程序之后执行
    // 需要 异步的ajax请求 获取的响应体结果数据
    $('.pag').pagination({
        pageCount: response.sumPage,           //  总页数
        totalData: response.row,               //  数据总数量
        current: response.page,                //  当前第几页
        showData: response.line,               //  每页显示的数据数量
        prevCls: 'prev',                       //  上一页 class样式类名
        nextCls: 'next',                       //  下一页 class样式类名
        prevContent: '上一页',	                 //  上一页节点内容
        nextContent: '下一页',	                 //  下一页节点内容
        activeCls: 'active',                     // 当前页选中状态class名
        mode: 'fixed',                           // 模式  unfixed不固定页码按钮数量，fixed固定数量
        count: 4,                               // 固定状态下 除选中按钮外 其他页数按钮的数量 也就是 设定4 一共5个按钮
        coping: true,                           // 开启 首页 末页
        homePage: '首页',                       // 首页节点内容，默认为空
        endPage: '末页',                         // 尾页节点内容，默认为空
        isHide: true,                           // 总页数为 0或者1 时 隐藏分页器插件
        // keepShowPN: false ,                   // 是否一直显示 上一页 下一页 mode模式要设定为 unfixed不固定
        jump: true,                             // 开启跳转指定页数          

        callback: function (res) {                // 点击分页器按钮 触发的回调函数
            // res中 存储函数方法 getCurren() 获取 点击按钮 表示的页数
            console.log(res.getCurrent());

            // 给 page变量 赋值 点击的分页器按钮 对应的页数
            page = res.getCurrent();

            // 再次 调用函数 再次发起新的请求 生成新页面
            setPage();
        }

    });
}



























